<style scoped>
.div_main{
  position: relative !important;
  background: transparent;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  overflow-y: scroll;
  height:calc(100% - 30px);
  /*border: 1px red solid;*/
}
.div_main::-webkit-scrollbar { width: 0; height: 0; }

.m_div_container{
  height: calc(100% - 40px);
  overflow: scroll;
  /*border: 1px red solid;*/
}
.m_div_container::-webkit-scrollbar { width: 0; height: 0; }
.m_div_card{
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;

  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0px 0px 2px rgba(0,37,57,0.2);

  color: #505968;
}
.m_div_card_title{
  width: 100%;
  padding-left: 10px;
  margin-top: 10px;
  font-size: 1.05rem;
}
.m_div_card_content{
  width: 100%;
  margin-top: 5px;
  padding-left: 20px;
  padding-bottom: 10px;
  font-size: 0.9rem;
  color: #505968;
  /*border: 1px red solid;*/
}
.m_div_card_content_item{
  margin-top: 0.3rem;
}

.m_div_center_card{
  position: absolute;
  top: 45px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 50px);
  overflow: scroll;
  border-radius: 10px;
  background-color: #ffffff;
  box-shadow: 0px 0px 2px rgba(0,37,57,0.2);
}
.m_div_center_card::-webkit-scrollbar { width: 0; height: 0; }
.m_div_center_card_item_01{
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;
  color: #666666;

  width: calc(100% - 20px);
  margin-top: 1rem;
  margin-left: 5px;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 3px;
  box-shadow: 0px 0px 2px rgba(0,37,57,0.7);
}
.m_div_center_card_item_01_title{
  width: calc(100% - 10px);
  padding-bottom: 0.3rem;
  border-bottom: 1px #9f9f9f solid;
  font-size: 1.05rem;
}
.m_div_center_card_item_02{
  width: 100%;
  margin-top: 0.4rem;
  font-size: 0.9rem;
}
</style>
<template>
  <div class="div_main">
    <div v-show="!itemShow" style="font-size: 1.6rem;margin-top: -8px;color: #ffffff;padding-bottom: 5px;" >
      <van-icon name="arrow-left" @click="$router.push({ path: '/business/my/s_menu' })" />
    </div>
    <div v-show="!itemShow" v-loading="loading" class="m_div_container" >
      <div v-for="item in dataList" class="m_div_card" @click="showItem(item)">
        <div class="m_div_card_title">
          <div style="float: left;margin-left: 10px;">{{item.type_mc}}</div>
          <div style="float: right;margin-right: 10px;color: #9f9f9f;">{{item.sys_code_key}}</div>
        </div>
        <div class="m_div_card_content">
          <div class="m_div_card_content_item">名称：{{item.name}}</div>
          <div class="m_div_card_content_item">电话：{{item.phone}}</div>
          <div class="m_div_card_content_item">联系人：{{item.lxr_xm}}</div>
          <div class="m_div_card_content_item">联系人职务：{{item.lxr_zw}}</div>
          <div class="m_div_card_content_item">联系人电话：{{item.lxr_dh}}</div>
          <div class="m_div_card_content_item">客户级别：{{item.khjb}}</div>
          <div class="m_div_card_content_item">维系人：{{item.fzxs_mc}}</div>
          <div class="m_div_card_content_item">备注：{{item.remark}}</div>
        </div>
      </div>
    </div>

    <div v-show="itemShow"
         style="position: relative;left:0px;top:0px;font-size: 1.6rem;color: #ffffff;" >
      <van-icon name="arrow-left" style="float: left;" @click="itemShow=false" />
    </div>
    <div v-show="itemShow" class="m_div_center_card">
      <div class="m_div_center_card_item_01">
        <div class="m_div_center_card_item_01_title">基本信息</div>
        <div class="m_div_center_card_item_02">名称：{{itemData.name}}</div>
        <div class="m_div_center_card_item_02">邮箱：{{itemData.email}}</div>
        <div class="m_div_center_card_item_02">电话：{{itemData.phone}}</div>
        <div class="m_div_center_card_item_02">传真号码：{{itemData.czhm}}</div>
        <div class="m_div_center_card_item_02">网址：{{itemData.gswz}}</div>
        <div class="m_div_center_card_item_02">地址：{{itemData.gsdz}}</div>
        <div class="m_div_center_card_item_02">行业：{{itemData.khhy}}</div>
        <div class="m_div_center_card_item_02">级别：{{itemData.khjb}}</div>
        <div class="m_div_center_card_item_02">来源：{{itemData.khly}}</div>
        <div class="m_div_center_card_item_02">维系人：{{itemData.fzxs_mc}}</div>
        <div class="m_div_center_card_item_02">开票信息：{{itemData.kpxx}}</div>
        <div class="m_div_center_card_item_02">客户喜好：{{itemData.khxh}}</div>
        <div class="m_div_center_card_item_02">资料：
          <div style="margin-right: 10px;">
            <elm-fileview module_name="biz_crm_customer_file" :rel_id="itemData.id"
                          :multiple="true" :limit="10"  list-type="picture" tip=" "></elm-fileview></div>
          </div>
        <div class="m_div_center_card_item_02">备注：{{itemData.remark}}</div>
      </div>
      <div class="m_div_center_card_item_01" style="margin-bottom: 1rem;">
        <div class="m_div_center_card_item_01_title">联系人信息</div>
        <div class="m_div_center_card_item_02">
          <div class="m_div_center_card_item_02">姓名：{{itemData.lxr_xm}}</div>
          <div class="m_div_center_card_item_02">职务：{{itemData.lxr_zw}}</div>
          <div class="m_div_center_card_item_02">电话：{{itemData.lxr_dh}}</div>
          <div class="m_div_center_card_item_02">邮箱：{{itemData.lxr_yx}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,

      dataList:[],

      itemShow:false,
      itemData:{},
    }
  },
  mounted() {
    this.v_getData();
  },
  methods: {
    async v_getData(){
      this.loading = true;
      this.dataList = [];
      let dataList = await elm.post('/business/my/business/GetCustomerByUser', {'pageSize':50,'pageNum':1});
      //console.log(JSON.stringify(dataList));
      dataList = dataList.pagedata;
      for(let i=0;i<dataList.length;i++){
        let item = dataList[i];
        //if(!this.em(item.title) && item.title.length>20){item.title = item.title.substring(0,19)+'…';}
      }
      this.dataList = dataList;
      this.loading = false;
    },
    showItem:function(data){
      //console.log(JSON.stringify(data));
      this.itemData = data;
      this.itemShow = true;
    },

    em: function (s) {
      if (s == null || s == '') { return true; }
      else { return false; }
    },

  }
}
</script>
